<template>
	 <view class="work-container">
		 <view class="example-body" >
		 		  <uni-row class="demo-uni-row" >
		 		  	<uni-col :span="5">
		 				<text  style="font-size: 22px;">{{this.$store.state.user.name.slice(0,5)}}*</text>
		 		  	</uni-col>
		 		  	<uni-col :span="5">
		 		  		<text style="font-size: 18px;">{{bindWorkshopName}}</text>
		 		  	</uni-col>
		 		  	<uni-col :span="8">
		 		  		<text style="font-size: 18px;">{{bindStationName}}</text>
		 		  	</uni-col>
		 		  	<uni-col :span="6">
		 				<!-- <button type="primary" size="mini" @click="onClickItem"  >绑定工位</button> -->
						<button type="primary" size="mini" @click="open"  >切换工位</button> 
						<uni-popup ref="stationPopup" background-color="#fff" >
							<view class="popup-content" >
								<uni-data-select placeholder="切换工位" v-model="stationId" :localdata="stationList" style="background-color: #fff;width: 500rpx;height: 100rpx;"
								@change="stationChange" :clear="false">
								</uni-data-select>
								<uni-data-select placeholder="切换设备" v-model="equipmentId" :localdata="equipmentList" style="background-color: #fff;width: 500rpx;height: 100rpx;margin-top: 20px;"
								@change="equipmentChange" :clear="false">
								</uni-data-select>
							</view>
						</uni-popup>
		 		  	</uni-col>
		 		  </uni-row>
		 </view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				active-color="#007aff" @clickItem="onClickStatus"/>
		</view>
		<view class="resourceList">
			<view v-for="(item,index) in workOrderList" :key="index" style="margin-top: 10rpx;">
				<uni-row class="resourceList-uni-row">
					<text style="font-size: 18px;font-weight:bold;">
						产品:&nbsp;&nbsp;&nbsp;{{item.materialName}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<text class="resourceList-text">
					工单号:&nbsp;&nbsp;&nbsp;{{item.number}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row" v-show="false">
					<text class="resourceList-text">
					客户:&nbsp;&nbsp;&nbsp;{{item.salOrder!=null?item.salOrder.customerName:""}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<text class="resourceList-text">
					生产数量:&nbsp;&nbsp;&nbsp;{{item.quantity}} &nbsp;&nbsp;&nbsp;({{item.materialUnitName}})
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<uni-col :span="6"><text class="resourceList-text">规格型号:&nbsp;</text></uni-col>
					<uni-col :span="18">
						<uni-row v-for="(item,index) in item.specification.split(',')">
							{{item}}
						</uni-row>
					</uni-col>
					
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<uni-col :span="24">
						<text class="resourceList-text">
						批次号:&nbsp;&nbsp;&nbsp;{{item.batchNumber}}
						</text>
					</uni-col>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<uni-col :span="12">
						<text class="resourceList-text">
						计划完工:&nbsp;&nbsp;&nbsp;{{item.planFinishDate}}
						</text>
					</uni-col>
					<uni-col :span="6">
						<view v-if="queryParams.mobileStatus=='X'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="未分配" type="error" />
						</view>
						<view v-if="queryParams.mobileStatus=='B'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="生产中" type="error" />
						</view>
						<view v-if="queryParams.mobileStatus=='D'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="已完成" type="error" />
						</view>
					</uni-col>
					<uni-col :span="6">
						<button plain="true"   size="mini" type="primary" @click="clickReport(item.id)">操作</button>
					</uni-col>
				</uni-row>
				
			</view>
		</view>	
	</view>		
</template>

<script>
	import { listStation, getStation} from "@/api/masterdata/station";
	import {  listForMobile} from "@/api/production/workOrder";
	import { mobileBindUserStation,getInfoByUserId } from "@/api/common/sysUserStation";
	import storage from '@/utils/storage'
	import {scanCodeBindStation} from '@/utils/mesUntil.js'
	import {
	  listWorkOrder,getWorkOrder
	} from '@/api/production/workOrder'
	import { getEquipment, listEquipment} from "@/api/equipment/equipment";
	export default {
		data() {
		  return {
			// 总条数
			total: 0,
			current:1,
			items: ['未分配','生产中', '已完成'],
			styleType: 'button',
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				orderByColumn:'',
				isAsc:"",
				/* 移动端用的工单状态,与字典中稍有差异 */
				mobileStatus: "B",
			},
			// 工单表格数据
			workOrderList: [],
			bindStationName: "?工位",
			bindWorkshopName: "?车间",
			stationId:0,
			equipmentId:0,
			stationList:[],
			equipmentList:[]
		  }
		},
		created() {
			this.getSysUserStationList();
			this.getList();
			this.getStationList();
			this.getEquipmentList();
		},
		methods: {
			/** 查询工单列表 */
			getList() {
			  listForMobile(this.queryParams).then(response => {
				this.workOrderList = response.rows;
				console.log("this.workOrderList===>",this.workOrderList)
				this.total = response.total;
			  });
			},
			onClickItem() {	
				let _this =this;
				scanCodeBindStation(_this);
			},
			getSysUserStationList(){
				getInfoByUserId().then(response => {
					this.bindStationName=response.data.stationName;
					this.bindWorkshopName=response.data.workshopName;
				});
			},
			onClickStatus(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					if ( e.currentIndex==0) {
						this.queryParams.mobileStatus = "X";
					}
					if ( e.currentIndex==1) {
						this.queryParams.mobileStatus = "B";
					}
					if ( e.currentIndex==2) {
						this.queryParams.mobileStatus = "D";
					}
					this.getList();
				}
			},
			clickReport(id){
				this.$tab.navigateTo("/pages/production/workOrder/details?id="+id);
			},
			getStationList(){
				listStation({pageSize: 99999}).then(response => {
					 let list = [];
					 list = response.rows;
					 for (let i = 0; i < list.length; i++) {
					 	list[i].value = list[i].id;
					 	list[i].text = list[i].name;
					 	this.stationList.push(list[i]);
					 }
					 console.log("this.stationList=======>",this.stationList)
				});
			},
			getEquipmentList(){
				listEquipment({pageSize: 99999}).then(response => {
					 let list = [];
					 list = response.rows;
					 for (let i = 0; i < list.length; i++) {
					 	list[i].value = list[i].id;
					 	list[i].text = list[i].name;
					 	this.equipmentList.push(list[i]);
					 }
				});
			},
			open(){
				this.$refs.stationPopup.open()
			},
			stationChange(value){
				console.log("value==========>",value)
				getStation(value).then(response => {
					let data =response.data;
					//弹框是否确认绑定某某工位
					let _this = this;
					uni.showModal({
						title: "确认要绑定："+data.name+"吗?",
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确认",
						//删除字体的颜色
						confirmColor:'red',
						//取消字体的颜色
						cancelColor:'#000000',
						success: function(res) {
							if (res.confirm) {
								let stationTmp ={};
								stationTmp.stationId =data.id;
								stationTmp.stationName = data.name
								//确认绑定,调用用户工位绑定新增接口
								mobileBindUserStation(stationTmp).then(resB => {
									_this.bindStationName=data.name;
									_this.bindWorkshopName=data.workshopName;
									_this.$refs.stationPopup.close();
								})
								
							} 
						}
					})
					
				});
			},
			equipmentChange(value){
				getEquipment(value).then(response => {
					let data =response.data;
					//弹框是否确认绑定某某工位
					let _this = this;
					uni.showModal({
						title: "确认要绑定："+data.name+"吗?",
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确认",
						//删除字体的颜色
						confirmColor:'red',
						//取消字体的颜色
						cancelColor:'#000000',
						success: function(res) {
							if (res.confirm) {
								let equipmentTmp ={};
								equipmentTmp.equipmentId =data.id;
								equipmentTmp.equipmentName = data.name
								//确认绑定,调用用户工位绑定新增接口
								mobileBindUserStation(equipmentTmp).then(resB => {
									_this.$refs.stationPopup.close();
								})
								
							} 
						}
					})
					
				});
			}
			
		},
		
	}
</script>

<style>
	.demo-uni-row {
		margin-bottom: 5rpx;

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}
	
	.resourceList-uni-row {
		margin-bottom: 8rpx;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 10rpx 10rpx 0;
		overflow: hidden;
	}
	
	.resourceList-text{
		font-size: 16px;
	}
	
	.resourceList{
		margin-left: 10px;
		
	}
	
</style>